<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./lib/react.development.js"></script>
  <script src="./lib/react-dom.development.js"></script>
  <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
  const root = ReactDOM.createRoot(document.querySelector("#root"));
  // 将函数声明为箭头函数。可以多次使用。传递参数不是很方便
  // 如果该组件创建多次，那么就会在内容中开辟不同的空间来存储箭头函数。
  class App extends React.Component{
    constructor() {
      super();
      this.num = 100;
    }
    clickHandler=()=>{
      console.log("clickHandler",this.num);
    }
    render(){
      return (
              <div>
                <h3>App</h3>
                <button onClick={()=>this.clickHandler(1)}>1</button>
                <button onClick={this.clickHandler}>1</button>
                <button onClick={this.clickHandler}>1</button>
                <button onClick={this.clickHandler}>1</button>
              </div>
      )
    }
  }
  root.render(<App/>)
</script>
</html>